<script lang="ts" setup>
import { useRouter } from '@/router';
import { onMounted, reactive, ref } from 'vue';
// @ts-ignore
import useMescroll from '@/uni_modules/mescroll-uni/hooks/useMescroll.js';
import { getPointsList } from '@/api/user';
// @ts-ignore
import MescrollUni from '@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-uni.vue';
import { useUserStore } from '@/store/user';
import { useLocale } from '@/locale/locale';
import { isWechat } from '@/utils/platform';

const { t } = useLocale();
const userStore = useUserStore();
const router = useRouter();
const statusBarH = ref(0);
const tab = ref('');
const list = ref<any[]>([]);
const upOption = reactive({
  // 首次自动执行
  auto: false,
  // 数量要大于3条才显示无更多数据
  noMoreSize: 3,
  offset: 10,
  textLoading: '',
  empty: {
    use: false
  }
});
const downOption = reactive({
  textInOffset: '',
  textOutOffset: '',
  textLoading: '',
  textSuccess: ''
});
const { mescrollInit, downCallback, getMescroll } = useMescroll();

function chooseTab(tabV: string) {
  tab.value = tabV;
  downCallback();
}

const upCallback = async (mescroll: any) => {
  const payload: any = {
    pageNum: mescroll.num,
    pageSize: mescroll.size,
    changeMode: tab.value
  };

  const res = await getPointsList(payload);
  let newList = res.data.list;
  if (!res.data.list) {
    newList = [];
  }
  mescroll.endBySize(newList.length, res.data.count);
  if (mescroll.num == 1) {
    list.value = [];
  }
  list.value = list.value.concat(newList);
};

onMounted(() => {
  uni.getSystemInfo({
    success: (res) => {
      statusBarH.value = res.statusBarHeight || 0;
    }
  });
});
</script>

<template>
  <view class="points-contain">
    <view class="points-contain-bg"></view>
    <view class="points-contain-view">
      <uni-nav-bar
        v-if="isWechat()"
        :border="false"
        :title="t('LAKey_score')"
        backgroundColor="none"
        color="#FFFFFF"
        fixed
        left-icon="left"
        status-bar
        @click-left="router.back"
      />
      <view class="points-contain-view-contain">
        <view class="points-contain-view-contain-points">
          <text>{{ t('LSKey_scoreMy') }}</text>
          <text>{{ userStore.user.points }}</text>
        </view>
        <image
          class="points-contain-view-contain-img"
          src="https://apt11-1251002327.cos.ap-tokyo.myqcloud.com/miniapp/icon_points_points.png"
        />
        <view
          :style="{ height: 'calc(100vh - 44px - 100rpx - 56rpx - ' + statusBarH + 'px)' }"
          class="points-contain-view-contain-list"
        >
          <view class="points-contain-view-contain-list-tab">
            <view
              :class="!tab ? 'active' : ''"
              class="points-contain-view-contain-list-tab-item"
              @click="chooseTab('')"
            >
              <view>{{ t('LSKey_scoreAll') }}</view>
              <view></view>
            </view>
            <view
              :class="tab == 'in' ? 'active' : ''"
              class="points-contain-view-contain-list-tab-item"
              @click="chooseTab('in')"
            >
              <view>{{ t('LSKey_scoreIn') }}</view>
              <view></view>
            </view>
            <view
              :class="tab == 'out' ? 'active' : ''"
              class="points-contain-view-contain-list-tab-item"
              @click="chooseTab('out')"
            >
              <view>{{ t('LSKey_scoreOut') }}</view>
              <view></view>
            </view>
          </view>
          <view class="points-contain-view-contain-list-list">
            <mescroll-uni
              ref="mescrollRef"
              :down="downOption"
              :fixed="false"
              :up="upOption"
              @down="downCallback"
              @init="mescrollInit"
              @up="upCallback"
            >
              <view
                v-for="(item, index) in list"
                v-if="list.length > 0"
                :key="index"
                class="points-contain-view-contain-list-list-item"
              >
                <view class="points-contain-view-contain-list-list-item-l">
                  <view>{{ item.des }}</view>
                  <view>{{ item.createdAt }}</view>
                </view>
                <view
                  :class="item.changePrice > 0 ? 'add' : ''"
                  class="points-contain-view-contain-list-list-item-r"
                >
                  {{ item.changePrice > 0 ? '+' : '' }}{{ item.changePrice }}
                </view>
              </view>
              <view v-else class="points-contain-view-contain-list-list-empty">
                <image
                  src="https://apt11-1251002327.cos.ap-tokyo.myqcloud.com/miniapp/icon_points_empty.png"
                />
                <view>{{ t('LAKey_pointEmpty') }}</view>
              </view>
            </mescroll-uni>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<style lang="scss" scoped>
.points {
  &-contain {
    position: relative;
    min-height: 100vh;

    &-bg {
      width: 100%;
      height: 432rpx;
      background: linear-gradient(180deg, #269c74 76%, rgba(38, 156, 116, 0) 99%);
    }

    &-view {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;

      &-contain {
        position: relative;
        bottom: 0;

        &-points {
          padding: 34rpx 56rpx 22rpx;
          display: flex;
          align-items: center;

          text {
            &:first-child {
              font-size: 36rpx;
              color: #ffffff;
              font-weight: 400;
              line-height: 50rpx;
              margin-right: 8rpx;
            }

            &:last-child {
              font-size: 72rpx;
              color: #ffffff;
              font-weight: 700;
              line-height: 100rpx;
            }
          }
        }

        &-img {
          position: absolute;
          right: 38rpx;
          top: 0;
          display: block;
          width: 270rpx;
          height: 236rpx;
          z-index: 99999;
        }

        &-list {
          position: relative;
          margin: 0 24rpx;
          background: #ffffff;
          border-radius: 16rpx;
          padding-left: 32rpx;
          padding-top: 20rpx;
          padding-bottom: 28rpx;

          &-tab {
            height: 96rpx;
            display: flex;
            padding: 30rpx 0 20rpx;
            margin-bottom: 20rpx;

            &-item {
              margin-right: 122rpx;

              view {
                &:first-child {
                  font-size: 28rpx;
                  color: #707070;
                  line-height: 40rpx;
                  font-weight: 400;
                }

                &:last-child {
                  height: 4rpx;
                  background: none;
                }
              }

              &.active {
                view {
                  &:first-child {
                    color: #3d3d3d;
                    font-weight: 500;
                  }

                  &:last-child {
                    background: #269c74;
                  }
                }
              }
            }
          }

          &-list {
            position: absolute;
            left: 32rpx;
            right: 0;
            top: 136rpx;
            bottom: 0;

            &-item {
              height: 164rpx;
              padding-right: 32rpx;
              padding-top: 32rpx;
              padding-bottom: 32rpx;
              border-bottom: 1px solid #f5f5f5;
              display: flex;
              align-items: center;
              justify-content: space-between;

              &:last-child {
                border-bottom: none;
              }

              &-l {
                view {
                  &:first-child {
                    font-size: 32rpx;
                    color: #1a1a1a;
                    line-height: 38rpx;
                    font-weight: 400;
                    margin-bottom: 26rpx;
                  }

                  &:last-child {
                    font-size: 26rpx;
                    color: #979797;
                    line-height: 32rpx;
                    font-weight: 400;
                  }
                }
              }

              &-r {
                font-size: 38rpx;
                color: #1a1a1a;
                line-height: 46rpx;
                font-weight: 400;

                &.add {
                  color: #d13820;
                }
              }
            }

            &-empty {
              width: 556rpx;
              height: 556rpx;
              margin-top: 52rpx;
              margin-left: 42rpx;
              position: relative;

              image {
                display: block;
                width: 100%;
                height: 100%;
              }

              view {
                text-align: center;
                font-size: 28rpx;
                color: #afafaf;
                line-height: 44rpx;
                font-weight: 400;
                position: absolute;
                left: 0;
                right: 0;
                bottom: 50rpx;
              }
            }
          }
        }
      }
    }
  }
}
</style>
